<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>河南美食</title>
    <script src="js/jquery.js"></script>
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/script.js"></script>
    <link type="text/css" href="css/style666.css" rel="stylesheet"/>
    <script language="javascript" type="text/javascript" src="js/mouseStyle.js"></script>
    <link rel="stylesheet" href="css/mouseStyle.css">
</head>

<body>

<div class="content">
    <ul class="venus-menu">
        <li class="active"><a href="index.html">主页</a></li>

        <li>
            <a><i></i>开封</a>
        </li>

        <li>
            <a><i></i>巩义</a>
        </li>

        <li>
            <a><i></i>洛阳</a>
        </li>
    </ul>
</div>
<div style="height:100%; width:100%;display: none;">花瓣飘落</div>
<script src="js/snowfall.jquery.js"></script>
<script>
    $(document).snowfall('clear');
    $(document).snowfall({
        image: "https://pic.kuaizhan.com/g3/c3/9b/3f72-60cf-4d91-8500-4f193c67c59205",
        flakeCount: 10,
        minSize: 12,
        maxSize: 22
    });
</script>
<div id="main">
    <div id="hero-slides">
        <div id="header">
        </div>
        <div id="slides-cont">
            <div class="button" id="next"></div>
            <div class="button" id="prev"></div>
            <div id="slides">
                <div class="slide" style="background-image: url(images/11.jpeg);">
                    <div class="number">面食</div>
                    <div class="body">
                        <div class="headline">烧饼<br/></div>
                        <br><br>
                        <a href="javascript:scroll('t1');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/5.jpeg);">
                    <div class="number">鱼类</div>
                    <div class="body">
                        <div class="headline">五花八门鱼类菜</div>
                        <br><br>
                        <a href="javascript:scroll('t2');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/6.jpeg);">
                    <div class="number">卷类</div>
                    <div class="body">
                        <div class="headline">春卷</div>
                        <br><br>
                        <a href="javascript:scroll('t3');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/7.jpeg);">
                    <div class="number">肉类</div>
                    <div class="body">
                        <div class="headline">酱牛肉</div>
                        <br><br>
                        <a href="javascript:scroll('t4');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/8.jpeg);">
                    <div class="number">汤类</div>
                    <div class="body">
                        <div class="headline">四味菜</div>
                        <br><br>
                        <a href="javascript:scroll('t5');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/9.jpeg);">
                    <div class="number">包子类</div>
                    <div class="body">
                        <div class="headline">小笼包</div>
                        <br><br>
                        <a href="javascript:scroll('t6');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/10.jpeg);">
                    <div class="number">茶类</div>
                    <div class="body">
                        <div class="headline">八宝茶</div>
                        <br><br>
                        <a href="javascript:scroll('t7');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/13.jpeg);">
                    <div class="number">点心类</div>
                    <div class="body">
                        <div class="headline">花生糕</div>
                        <br><br>
                        <a href="javascript:scroll('t8');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
                <div class="slide" style="background-image: url(images/12.jpeg);">
                    <div class="number">点心类</div>
                    <div class="body">
                        <div class="headline">双麻火烧</div>
                        <br><br>
                        <a href="javascript:scroll('t9');" target="_self">
                            <div class="link">前往了解</div>
                        </a>
                    </div>
                </div>
            </div>
            <div id="next-catch"></div>
            <div id="prev-catch"></div>
        </div>
    </div>
</div>
<br/>
<div>

</div>
</body>
<script>
    function scroll(id) {
        $("html,body").animate({
            scrollTop: $("#" + id).offset().top
        }, 1000);
    }
</script>
<script>
    let hero = document.getElementById('hero-slides');
    let slides = document.getElementById('slides');
    let next = ['next', 'next-catch'].map(n => document.getElementById(n));
    let prev = ['prev', 'prev-catch'].map(n => document.getElementById(n));
    let slideChildren = slides.children;
    let slideCount = slides.children.length;
    let currentlyDemoing = false;
    let currentPage = 0;
    let slidesPerPage = () => window.innerWidth > 1700 ? 4 : window.innerWidth > 1200 ? 3 : 2;
    let maxPageCount = () => slideCount / slidesPerPage() - 1;

    function goToPage(pageNumber = 0) {
        currentPage = Math.min(maxPageCount(), Math.max(0, pageNumber));
        console.log(currentPage);
        hero.style.setProperty('--page', currentPage);
    }

    function sleep(time) {
        return new Promise(res => setTimeout(res, time));
    }

    function hoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.add('hover');
    }

    function unhoverSlide(index) {
        index in slideChildren &&
        slideChildren[index].classList.remove('hover');
    }

    async function demo() {
        if (currentlyDemoing) {
            return;
        }
        currentlyDemoing = true;
        if (currentPage !== 0) {
            goToPage(0);
            await sleep(800);
        }
        let slides = slidesPerPage();
        let pageSeq_ = {
            2: [1, 2, 1],
            3: [1, 2, 1 / 3],
            4: [1, 1, 0]
        };
        let pageSeq = pageSeq_[slides] || pageSeq_[4];
        let slideSeq_ = {
            2: [2, 4, 3],
            3: [3, 6, 2],
            4: [3, 6, 2]
        };
        let slideSeq = slideSeq_[slides] || slideSeq_[2];
        await sleep(300);
        goToPage(pageSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[0]);
        await sleep(1200);
        goToPage(pageSeq[1]);
        unhoverSlide(slideSeq[0]);
        await sleep(500);
        hoverSlide(slideSeq[1]);
        await sleep(1200);
        goToPage(pageSeq[2]);
        unhoverSlide(slideSeq[1]);
        await sleep(300);
        hoverSlide(slideSeq[2]);
        await sleep(1600);
        goToPage(0);
        unhoverSlide(slideSeq[2]);
        currentlyDemoing = false;
    }

    next.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage + 1)));
    prev.forEach(n => n.addEventListener('click', () => !currentlyDemoing && goToPage(currentPage - 1)));

    sleep(100).then(demo);

</script>
